<template>
<div class="app-container">
  <div class="filter-container">
        <el-button type="primary" @click="analyzeClick()">意向分析</el-button>
        <el-input clearable v-model="search.number" placeholder="单号" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.customer" placeholder="客户" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.phone" placeholder="联系电话" style="width: 170px;margin:0 5px;"></el-input>
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
       <el-checkbox v-model="search.nothavedorder" style="margin-left:10px;">过滤已转订单</el-checkbox>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="意向单号">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="客户姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.intentiondate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="转意向天数">
        <template slot-scope="scope">
          <span>{{ scope.row.intentiondays }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="已回访次数">
        <template slot-scope="scope">
          <span>{{ scope.row.revisittimes }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="最近回访日期">
        <template slot-scope="scope">
          <span>{{ scope.row.recentvisitdate}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="意向等级">
        <template slot-scope="scope">
          <span>{{ scope.row.intentionlevel }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="是否战败">
        <template slot-scope="scope">
          <span>{{ scope.row.isfail }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="逾期次数">
        <template slot-scope="scope">
          <span>{{ scope.row.overduetimes }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="意向车型">
        <template slot-scope="scope">
          <span>{{ scope.row.intentioncar }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="期望价格">
        <template slot-scope="scope">
          <span>{{ scope.row.intentionprice }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="自店报价">
        <template slot-scope="scope">
          <span>{{ scope.row.shopprice }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="销售顾问">
        <template slot-scope="scope">
          <span>{{ scope.row.guider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="今日应回访">
        <template slot-scope="scope">
          <el-tag :type="['info','success',''][scope.row.state]">{{ (scope.row.state?'是' : '否') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="下次应访日期">
        <template slot-scope="scope">
          <span>{{ scope.row.nextvisitdate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="380" fixed="right">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="failClick(scope.row.id)">战败</el-button>
          <el-button type="primary" size="small" @click="modifyClick(scope.row.id)">修改</el-button>
          <el-button type="warning" size="small" @click="assignClick(scope.row.id)">分派</el-button>
          <el-button type="primary" size="small" @click="revisitClick(scope.row.id)">回访</el-button>
          
          <router-link :to="'/presalemanage/reception/intentiondetails/'+scope.row.id">
            <el-button type="primary" size="small" style="margin-left:5px;">
              详情
            </el-button>
          </router-link>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 战败 -->
<el-dialog :title="dialogFail.title" :visible.sync="dialogFail.visible"  width="700px">
    <div class="ci">
        <div class="item hauto">
        <span class="name required">战败原因</span>
        <span class="value">
            <el-input type="textarea" rows=4 clearable v-model="dialogFail.data.reason" placeholder="" style="width: 100%;"></el-input>
            
        </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFail.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveFailClick()" :loading="dialogFail.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 战败 -->   

<!-- 修改 -->
<el-dialog :title="dialogModify.title" :visible.sync="dialogModify.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">客户姓名：</span>
            <span class="value">
                <el-input  clearable v-model="dialogModify.data.customerName" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">联系电话：</span>
            <span class="value">
                <el-input  clearable v-model="dialogModify.data.customerPhone" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">客户性别：</span>
            <span class="value">
                <el-radio-group v-model="dialogModify.data.customerGender">
                    <el-radio-button label="男"></el-radio-button>
                    <el-radio-button label="女"></el-radio-button>
                </el-radio-group>
            </span>
        </div>
        <div class="item">
            <span class="name required">微信号：</span>
            <span class="value">
                <el-input  clearable v-model="dialogModify.data.customerWeixin" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">具体地址：</span>
            <span class="value">
                <el-input  clearable v-model="dialogModify.data.customerAddress" placeholder="" style="width: 100%;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">客户来源：</span>
            <span class="value">
                <el-input  clearable v-model="dialogModify.data.customerName" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">购车字数：</span>
            <span class="value">
                <el-input  clearable v-model="dialogModify.data.customerName" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogModify.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveModifyClick()" :loading="dialogModify.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 修改 -->  

<!-- 分派 -->
<el-dialog :title="dialogAssign.title" :visible.sync="dialogAssign.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">意向单号</span>
            <span class="value">
                <el-input clearable v-model="dialogAssign.data.number" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">原销售顾问</span>
            <span class="value">
                <el-input clearable v-model="dialogAssign.data.guider" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">新销售顾问</span>
            <span class="value">
                <el-select v-model="dialogAssign.data.newguider" filterable clearable remote placeholder="请输入查询"
                    :remote-method="searchGuiders" :loading="dialogAssign.selectloading" style="width:220px">
                    <el-option v-for="item in dialogAssign.selectdata" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAssign.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveAssignClick()" :loading="dialogAssign.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 分派 -->   

<!-- 回访 -->
<el-dialog :title="dialogRevisit.title" :visible.sync="dialogRevisit.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name">意向单号</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.number" placeholder="" style="width: 220px;"></el-input>
            </span>
            <span class="name">当前意向等级：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.intentionlevel" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">意向日期：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.intentiondate" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">行动后意向：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.intentioncurrent" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">行动内容：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.intentioncontent" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">回访方式：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.revisittype" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">意向车型：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.intentioncar" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">期望价格：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.intentionprice" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">自店报价：</span>
            <span class="value">
                <el-input clearable v-model="dialogRevisit.data.shopprice" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item hauto">
            <span class="name required">备注：</span>
            <span class="value">
                <el-input type="textarea" rows="4" clearable v-model="dialogRevisit.data.remark" placeholder="" style="width: 100%;"></el-input>
            </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAssign.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveAssignClick()" :loading="dialogAssign.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 回访 -->   

</div>
</template>

<script>
import * as receptionApi from '@/api/presale/reception'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'
export default {
  name:'intentionList',
  components:{Pagination},
  data(){
      return {
          search:{
              number:'',
              customer:'',
              phone:'',
              daterange:'',
              nothavedorder:true
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
            },
          list:null,
          listLoading:false,
          total:0,
          dialogFail:{
            visible:false,
            saveloading:false,
            title:'战败',
            data:{
                reason:''
            }
          },
          dialogModify:{
            visible:false,
            saveloading:false,
            title:'修改',
            data:{
                customerName:'',
                customerGender:'',
                customerPhone:'',
                customerWeixin:'',
                customerAddress:'',
                customerSource:'',
                customerBuytimes:''
            }
          },
          dialogAssign:{
            visible:false,
            saveloading:false,
            selectloading:false,
            title:'分派',
            data:{
              newguider:'',
              guider:'',
              number:''  
            },
            selectdata:[
            ]
          },
          dialogRevisit:{
            visible:false,
            saveloading:false,
            title:'回访',
            data:{
              number:'',
              intentionlevel:'',
              intentiondate:'',
              intentioncurrent:'',
              intentioncontent:'',
              revisittype:'',
              intentioncar:'',
              intentionprice:'',
              shopprice:'',
              remark:''
            },
          },
      }
  },
  created(){
      this.fetchData();
      this.searchGuiders(''); 
  },
  methods:{
      fetchData(){
          var that=this;
          that.listLoading = true;
          receptionApi.getIntentionList({}).then(res=>{
              if(res.data){
                  that.list=[...res.data.items.map((item,index)=>{
                    item._id=index+1;
                    return item;
                    })];
                    that.listLoading = false;
                    that.total=res.data.total;
              }
          })
      },
      analyzeClick(){
          this.$router.push({
              path:'/presalemanage/reception/intentionanalyze'
          })
      },
      failClick(id){
          var that=this;
          that.dialogFail.visible=true;
      },
      modifyClick(id){
        var that=this;
          that.dialogModify.visible=true;
      },
      assignClick(id){
         var that=this;
          that.dialogAssign.data.number='';
          that.dialogAssign.data.guider='';
          that.dialogAssign.data.newguider='';
          that.dialogAssign.visible=true;
      },
      revisitClick(id){
          var that=this;
          that.dialogRevisit.visible=true;
      },
      searchGuiders(query){
          var that=this;
          that.dialogAssign.selectloading=true;
          console.log(that.dialogAssign.selectdata)
          receptionApi.getGuiderList({key:query}).then(res=>{
              if(res.data && res.data.items){
                  that.dialogAssign.selectdata.length>0 && that.dialogAssign.selectdata.splice(0,that.dialogAssign.selectdata.length);
                  that.dialogAssign.selectdata.push(...res.data.items.map(o=>{
                      var obj={
                          label:o.name,
                          value:o.id,
                      }
                      return obj;
                  }));
                  console.log(that.dialogAssign.selectdata)
                  
              }
              that.dialogAssign.selectloading=false;
          })
      }
  }
}
</script>

<style>

</style>